<template>
    <div id="auditParkingSpace">
        <el-table :data="parkingSpaceData"  border style="width: 100%" >
             <el-table-column fixed prop="parkingSpaceNo" label="停车场号码"  width="100">
            </el-table-column>
            <el-table-column  prop="parkingSpaceAddr"  label="停车场地址"  width="250">
            </el-table-column>
            <el-table-column  prop="userId" label="用户id" width="80">
            </el-table-column>
            <el-table-column  prop="username" label="用户名" width="100">
            </el-table-column>           
            <el-table-column  prop="propertyManagerId" label="物业id" width="80">
            </el-table-column>
            <el-table-column  prop="propertyName" label="物业名称" width="200">
            </el-table-column>
            <el-table-column  prop="propertyManagerGet" label="物业比例" width="80">
            </el-table-column>
            <el-table-column  prop="platoformGet" label="平台比例" width="80">
            </el-table-column>
            <el-table-column   label="时租金/元" width="100">
                <template slot-scope="scope" >
                  {{scope.row.hourCost}}
                </template>
            </el-table-column>
            <el-table-column   label="日租金/元" width="100">
                <template slot-scope="scope" >
                  {{scope.row.dayCost}}
                </template>
            </el-table-column>
            <el-table-column   label="周租金/元" width="100">
                <template slot-scope="scope" >
                  {{scope.row.weekCost}}
                </template>
            </el-table-column>
            <el-table-column label="停车场图片" width="200">
                <template slot-scope="scope">
                 <el-image style="width: 100px; height: 100px" :src="scope.row.parkingSpacePic" fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="产权证" width="200">
                <template slot-scope="scope">
                 <el-image style="width: 100px; height: 100px" :src="scope.row.parkingSpacePropertyPic" fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="身份证" width="200">
                <template slot-scope="scope">
                 <el-image style="width: 100px; height: 100px" :src="scope.row.parkingSpaceOwnerPic" fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="真人照" width="200">
                <template slot-scope="scope">
                 <el-image style="width: 100px; height: 100px" :src="scope.row.parkingSpaceRelownerPic" fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">                
                <el-button type="text" size="small" @click="beginAuditUser(scope.row)">审核</el-button>
            </template>
            </el-table-column>
        </el-table>

        <el-pagination background layout="prev, pager, next" 
        :total="pageData.total" :page-size="pageData.pageSize" :current-page="pageData.pageIndex"
        @current-change="handlePageChange"
        ></el-pagination>


        <el-dialog title="停车场审核" :visible.sync="dialogVisible" width="60%" >
            <el-descriptions class="margin-top"  :column="3" :size="size" border>              

                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        用户id
                    </template>
                    {{rowdata.userId}}
                </el-descriptions-item>
                 <el-descriptions-item label-class-name="mylabel"> 
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        用户名
                    </template>
                    {{rowdata.username}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        物业id
                    </template>
                    {{rowdata.propertyManagerId}}
                </el-descriptions-item>    
                <el-descriptions-item label-class-name="mylabel" content-class-name="mycontent1">
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        停车场号码
                    </template>
                    {{rowdata.parkingSpaceNo}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" content-class-name="mycontent2">
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        停车场地址
                    </template>
                    {{rowdata.parkingSpaceAddr}}
                </el-descriptions-item>
                
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        物业名称
                    </template>
                    {{rowdata.propertyName}}
                </el-descriptions-item>    
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        时租金/元
                    </template>
                    {{rowdata.hourCost}}
                </el-descriptions-item>    
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        日租金/元
                    </template>
                    {{rowdata.dayCost}}
                </el-descriptions-item>    
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        周租金/元
                    </template>
                    {{rowdata.weekCost}}
                </el-descriptions-item>    
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        物业比例
                    </template>
                    <el-input  v-model="rowdata.propertyManagerGet" placeholder="0~0.3"></el-input>
                
                </el-descriptions-item>    
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        平台比例
                    </template>
                     <el-input  v-model="rowdata.platoformGet" placeholder="0.1~0.3"></el-input>
                  
                </el-descriptions-item>    
            </el-descriptions>
            <el-descriptions class="margin-top"  :column="1" :size="size" border>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        停车场图片
                    </template>                    
                         <el-image style="width: 500px; height: 350px" :src="rowdata.parkingSpacePic" fit="contain"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        产权证
                    </template>                    
                         <el-image style="width: 500px; height: 350px" :src="rowdata.parkingSpacePropertyPic" fit="contain"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        身份证
                    </template>                    
                         <el-image style="width: 500px; height: 350px" :src="rowdata.parkingSpaceOwnerPic" fit="contain"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        真人照
                    </template>                    
                         <el-image style="width: 500px; height: 350px" :src="rowdata.parkingSpaceRelownerPic" fit="contain"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        审核意见
                    </template>                    
                  
                    <el-input type="textarea" :rows="2" maxlength="20" show-word-limit  placeholder="请输入审核意见" v-model="message"></el-input>
                </el-descriptions-item>      
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        审核结果
                    </template>                    
                    <template>
                        <el-radio v-model="isAudit" label="1">不予通过</el-radio> 
                        
                        <el-radio v-model="isAudit" label="2">通过</el-radio>
                    </template>
                </el-descriptions-item> 
            </el-descriptions>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cansleAudit">取 消</el-button>
                <el-button type="primary" @click="confirmAudit">确 定</el-button>
            </span>
        </el-dialog>


    </div> 
</template>

<script>
    export default {
        name:"auditParkingSpace",
        inject:['reload'],
        data() {
            return {
                parkingSpaceData:[],
                dialogVisible:false,
                size:'',
                rowdata:'',
                isAudit:'1',
                message:'',
                pageData:{
                    total:0,
                    pageSize:3,
                    pageIndex:1,
                }
            }
        },
        methods: {
            handlePageChange(page){
                this.pageData.pageIndex=page;
                this.getNeedAuditParkingSpace();
            },
            confirmAudit(){
                if((this.rowdata.propertyManagerGet<0||this.rowdata.propertyManagerGet>0.3)||
                (this.rowdata.platoformGet<0.1||this.rowdata.platoformGet>0.3)){
                    this.$message({
                            message:"物业比例只能为0~0.3，平台比例只能为0.1~0.3",
                            type:"warning"
                    })
                    return;
                }

                let form={
                    parkingSpaceId:this.rowdata.parkingSpaceId,
                    managerId:localStorage.getItem("managerId"),
                    isaudit:this.isAudit,
                    message:this.message,
                    propertyManagerGet:this.rowdata.propertyManagerGet,
                    platoformGet:this.rowdata.platoformGet                    
                };
                console.log(form);
                this.$axios.post('/confirmAuditParkingSpace',form)
                .then(resp=>{
                    if(resp.data.success){
                        this.$message({
                            message:"审核提交成功",
                            type:"success"
                        })
                    }else{
                        this.$message({
                            message:resp.data.message,
                            type:"warning"
                        })
                    }
                   this.reload()
                })
                .catch(error=>{
                    this.$message.error('系统未知错误，审核提交失败');
                    console.log(error);
                })
                this.dialogVisible=false;
            },
            cansleAudit(){
                this.dialogVisible = false;
                this.isAudit='1';
                this.message="";
            },
            beginAuditUser(row){
                this.dialogVisible=true;
                this.rowdata=row;
            },
            getNeedAuditParkingSpace() {
                 this.$axios.get('/getNeedAuditParkingSpace',{params:{
                     pageIndex:this.pageData.pageIndex
                 }})
                .then(resp=>{ 
                    if(resp.data.data.records.length==0){
                        this.$message({
                            message:"您真棒，所有的用户都已经审核了",
                            type:"success"
                        })
                    }else{
                        this.parkingSpaceData=resp.data.data.records;
                        
                        Object.assign(this.pageData,resp.data.data);
                    }
                })
                .catch(error=>{
                    this.$message.error('系统未知错误');
                    console.log(error);
                })
            }
        },
        mounted(){
           this.getNeedAuditParkingSpace();
        }
    }
</script>

<style>
.mylabel{
    width:120px;
}

.mycontent1{
    width:120px;
}
.mycontent2{
    width:120px;
}
</style>